<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { selectMaterial } from '@/api/sorting-matching';

  const booleanStore = useBooleanStore();

  // 托盘列表
  const materialList = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(1);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'index',
      slotName: 'index',
      width: 60,
    },
    {
      title: '配套状态',
      dataIndex: 'state',
      width: 90,
    },
    {
      title: '分拣状态',
      dataIndex: 'isSort',
      width: '90',
    },
    {
      title: '日计划时间',
      dataIndex: 'requiredDeliveryTime',
      width: '170',
    },

    {
      title: '图号',
      dataIndex: 'itemCode',
      width: '180',
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      width: '150',
    },
    {
      title: 'AO编码',
      dataIndex: 'aoCode',
      width: '180',
    },

    {
      title: '工作包编码',
      dataIndex: 'packageCode',
      width: '150',
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      width: '150',
    },

    {
      title: '批次',
      dataIndex: 'batchNo',
      width: '70',
    },

    {
      title: '架次',
      dataIndex: 'startPlaneNo',
      width: '70',
    },
    {
      title: '物料名称',
      dataIndex: 'itemName',
      width: '150',
    },
    {
      title: '需求数量',
      dataIndex: 'itemQty',
      width: '90',
    },

    {
      title: '配套数量',
      dataIndex: 'matchQty',
      width: '90',
    },
    {
      title: '条码号',
      dataIndex: 'barCode',
      width: '150',
    },
    {
      title: '缓存箱编码',
      dataIndex: 'workbinCode',
      width: '150',
    },
    {
      title: '装配图号',
      dataIndex: 'repartAss',
      width: '150',
    },

    {
      title: '工艺更改类型',
      dataIndex: 'artChangeType',
      width: '150',
    },
    // {
    //   title: '合格证',
    //   dataIndex: 'mesCheckQualiticationId',
    //   width: '150',
    // },
  ];
  const materialDrawer = ref<boolean>(false);

  const msTaskPackageId = ref<string>('');
  const toolCode = ref<string>('');

  async function getMaterialList() {
    const data = await selectMaterial({
      page: { pageSize: pageSize.value, currentPage: pageNum.value, total: 1 },
      queryParam: {
        palletCode: msTaskPackageId.value,
        msTaskPackageId: toolCode.value,
      },
    });
    materialList.value = data?.list;
  }

  watch(
    () => [booleanStore.info1, booleanStore.info2],
    () => {
      materialDrawer.value = true;
      msTaskPackageId.value = booleanStore.info1;
      toolCode.value = booleanStore.info2;
      getMaterialList();
    }
  );

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    getMaterialList();
  });
</script>

<template>
  <!-- 物料信息抽屉 -->
  <a-drawer
    :width="840"
    :visible="materialDrawer"
    :footer="false"
    unmount-on-close
    @cancel="materialDrawer = !materialDrawer"
  >
    <template #title> 物料信息 </template>
    <div>
      <a-table
        :stripe="true"
        class="top-table"
        :pagination="false"
        :columns="columns"
        :data="materialList"
      >
        <template #index="{ record }">{{
          materialList.indexOf(record) + 1
        }}</template>
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total"
          :current="pageNum"
          :page-size="pageSize"
          show-total
          show-jumper
          show-page-size
          @change="change"
          @update:page-size="changeSize"
        />
      </div>
    </div>
  </a-drawer>
</template>

<style scoped>
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
